<script lang="ts" setup name="ImmediateWithdrawal">
import {useRouter} from 'vue-router';
const router = useRouter();
const value = ref('');
</script>
<template>
 <div class="withdrawal-container">
   <nav-header class="header" title='提现操作'></nav-header>
   <div class="content">
     <div>
       <div class="item">
         <div class="item-title">提现金额</div>
         <div class="item-info">
           <van-field v-model="value" label="RS" />
         </div>
       </div>
       <div class="item bank-info">
         <div class="item-title">充值金额</div>
         <div class="item-info">
           <div class="info">
             <img src="@/assets/images/icon/icon-home-list-btc.png" alt="">
             <span>000 000 3840</span>
           </div>
           <div class="change">切换</div>
         </div>
       </div>

       <div class="item">
         <div class="item-title">添加备注</div>
         <div class="item-info">
           <van-field  placeholder="请输入备注"   rows="5"
                       autosize  type="textarea"  />
         </div>
       </div>
     </div>
     <div class="btns">
       <van-button
           class='btn-submit-out'
           type="default"
       >
         取消
       </van-button>
       <van-button
           class='btn-submit-in'
           type="primary"
       >
         确认提现
       </van-button>
     </div>

   </div>
 </div>
</template>
<style lang="scss" scoped>
.withdrawal-container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    .item {
      margin-bottom: 8px;

      &-title {
        font-weight: 400;
        font-size: 8px;
        color: #2C2C2C;
        margin-bottom: 5px;
      }

      &-info {
        min-height: 26px;
        padding: 0 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #F7F7F7;
        border-radius: 5px;
        font-weight: bold;
        .van-cell{
          background: transparent;
          padding-left:0px;
          :deep(.van-field__label){
            font-weight: bold;
            font-size: 9px;
            width: 15px;
          }
        }
      }
    }
    .bank-info .item-info {
      min-height: 36px;
      justify-content: space-between;

      .info {
        display: flex;
        align-items: center;

        img {
          width: 20px;
          margin-right: 6px;
        }

        span {
          font-weight: bold;
          font-size: 8px;
          color: #2C2C2C;
        }
      }

      .change {
        font-size: 8px;
        color: #1642F4;
        font-weight: bold;
      }
    }
    .item-upload{
      margin-top: 5px;
      .item-pic{
        :deep(.van-uploader__upload){
          border: 1px dashed #BDBDBD;
          border-radius: 4px;
          background: transparent;
          .van-icon-photograph::before{
            content: "\e6fa";
          }
        }
        :deep(.van-uploader__preview-delete){
          background: red;
          border-radius: 6px;
          top: -2px;
          right: -2px;
          .van-uploader__preview-delete-icon{
            top: 1px;
            right: 1px;
          }
        }
      }
    }
    :deep(.van-cell-group) {
      margin: 0;
      .van-cell {
        min-height: 36px;
        padding-left: 0px;
        padding-right: 0px;
        .van-field-3-input{
          font-weight: 400;
          font-size: 7px;
          color: #777777;
        }
        .van-field__control{
          font-weight: bold;
          font-size: 8px;
          color: #2C2C2C;
        }
        .icon-copy{
          width: 6px;
          padding-left: 5px;
        }
      }
    }
    .btns{
      display: flex;
      margin-top: 5px;
      .btn-submit-out{
        flex: 1;
        color: #1642F4;
        margin-right: 10px;
        border-radius: 100px;
        font-size: 8px;
        line-height: 1;
        font-weight: bold;
      }
      .btn-submit-in{
        flex: 1;
        border-radius: 100px;
        background: #1642F4;
        font-size: 8px;
        border: none;
        line-height: 1;
      }
    }

  }
}

</style>
